<template>
	<view>
	
		<view class="search-head">
			<u-search :animation="true" height="100" placeholder="请输入修勾相关昵称:" v-model="keyword" @custom="search"></u-search>
		</view>
		
		<view class="search-body">
			<text>历史记录</text>
			<u-icon @click="deleteHis" style="position: absolute; right: 20rpx;" name="trash" color="#fa3534" size="55"></u-icon>
		</view>
		
		<view v-for="(item,index) in searchHis" :key="index" class="search-history" >
				{{item}}
		</view>
		
		<navigator v-for="(item,index) in userList" :key="index"  :url= " '../pages/detail/detail?userid=' + item._id">
			<view  class="search-foot">
					<u-avatar :src="item.imgSrc"></u-avatar>
					<view style="margin-left: 40rpx; line-height: 90rpx;color: pink;font-size: 38rpx;" class="">
						{{item.nickname}}
					</view>	
			</view>	
		</navigator>
		
		
		
		
	</view>
</template>

<script>
	export default {
		name:"serach",
		data() {
			return {
				keyword:'',
				searchHis:[],
				userList: {}
			};
		},
		
		onReady() {
			var that = this
			uni.getStorage({
				key: 'search',
				success: function (res) {
					that.searchHis = res.data
				}
			});
		},
		
		methods:{
			search(){
				var that = this
				
				const db = uniCloud.database()
				db.collection('users').where({
					nickname: new RegExp(that.keyword, 'i')
				}).field({
					imgSrc:true,
					nickname:true
				}).get().then(res=>{
					that.userList = res.result.data
					that.setSto()
					
				})
				
			},
			
			setSto(){
				var that = this
				let cloneHislist = [...that.searchHis]
				cloneHislist.unshift(that.keyword)
				uni.setStorage({
					key: 'search',
					data: [...new Set(cloneHislist)],
					success: function () {
						that.searchHis = [...new Set(cloneHislist)]
					}
				});
			},
			
			deleteHis(){
				var that = this
				uni.showModal({
					title: '提示',
					content: '确认删除',
					success: function (res) {
						if (res.confirm) {
							uni.removeStorage({
								key: 'search',
								success: function (data) {
									that.searchHis = []
								}
							});
						} else if (res.cancel) {
							
						}
					}
				});
					
			},
		}
	}
</script>

<style>
	.search-body{
		margin-top: 15rpx;
		font-size: 45rpx;
		margin-bottom: 30rpx;
	}
	
	.search-history{
		display: inline;
		font-size: 35rpx;
		margin-left: 30rpx;
		border-radius: 10rpx;
		background-color: #FAFAFA;
		border: 6rpx #DCDFE6 solid;
	}
	
	.search-foot{
		margin-top: 40rpx;
		height: 180rpx;
		display: flex;
	}

</style>